"use client";

import type * as React from "react";

import { useIndentButton, useOutdentButton } from "@platejs/indent/react";
import { IndentIcon, OutdentIcon } from "lucide-react";

import { ToolbarButton } from "./toolbar";

export function IndentToolbarButton(
  props: React.ComponentProps&lt;typeof ToolbarButton&gt;,
) {
  const { props: buttonProps } = useIndentButton();

  return (
    &lt;ToolbarButton {...props} {...buttonProps} tooltip="Indent"&gt;
      &lt;IndentIcon /&gt;
    &lt;/ToolbarButton&gt;
  );
}

export function OutdentToolbarButton(
  props: React.ComponentProps&lt;typeof ToolbarButton&gt;,
) {
  const { props: buttonProps } = useOutdentButton();

  return (
    &lt;ToolbarButton {...props} {...buttonProps} tooltip="Outdent"&gt;
      &lt;OutdentIcon /&gt;
    &lt;/ToolbarButton&gt;
  );
}
